<template>
    <div>
        <a-modal
            :dialog-style="{ top: '40px' }"
            title="技术审评任务分配"
            :visible="visible"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="visible = false"
            :width="1000"
            :forceRender="true"
            class="assignPersonnel-modal-box"
        >
            <template slot="title">
                <div style="width: 100%;display: flex;text-align: center;">
                    <span style="font-size: 18px;font-weight: 600;text-align: center;">技术审评任务分配</span>
                </div>
            </template>
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <!-- <a-button @click="handleOk" type="primary">确定</a-button> -->
                    <a-button @click="visible = false">关闭</a-button>
                </div>
            </template>
            <div class="assignPersonnel-fcyjcfw-box" >
                <span class="left-text-v">审评范围：</span>
                <a-textarea 
                    :readOnly="true"
                    v-model:value="masterData.fcyjcfw"
                    placeholder="审评范围"
                    :autosize="{ minRows: 1, maxRows: 3 }"
                ></a-textarea>
            </div>
            <!-- <a-spin size="large" :spinning="spinning" :key="spinningKey"> -->
                <!-- <div v-if="chapterList.length" class="chapter-head-box">
                    <div class="chapter-head-for-v">
                        <span style="font-weight: 600;" class="fzjmc-text">审评章节</span>
                        <span style="display: inline-block;width: 150px;text-align: center;font-weight: 600;">负责人</span>
                    </div>
                    <div class="chapter-head-for-v">
                        <span style="font-weight: 600;" class="fzjmc-text">审评章节</span>
                        <span style="display: inline-block;width: 150px;text-align: center;font-weight: 600;">负责人</span>
                    </div>
                    <div v-for="(item,index) in chapterList" :key="index" class="chapter-head-for-v">
                        <span class="fzjmc-text">{{ item.fzjmc }}</span>
                        <a-select :default-value="item.ftxfzrid" style="width: 150px" placeholder="请选择负责人" @change="headChange($event,item)">
                            <a-select-option v-for="(trem,tIndex) in headList" :key="tIndex" :value="trem.userid">
                                {{trem.name}}
                            </a-select-option>
                        </a-select>
                    </div>
                </div> -->
            <!-- </a-spin> -->
            <div class="process-handling-card" v-if="currentData.fhbsxzt && currentData.fhbsxzt == 1" >
                <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                    <a-tab-pane v-for="(item,index) in reportList" :key="index" :tab="item.bgmc"></a-tab-pane>
                </a-tabs>
            </div>
            <div :style="{border:currentData.fhbsxzt && currentData.fhbsxzt == 1?'1px solid #38f':'none',borderTop:'none'}">
                <commpVxeTable
                    :key="dataTableKey"
                    :isCanWrap="true"
                    :config="dataTableConfig" 
                    :columns="columnsVxe" 
                    :formItem="formItem"
                    tablePadding="5px"
                    ref="acceptanceRegistrationRef"
                >
                    <template v-slot:operation_realname="{row}" data-desc="姓名">
                        <span style="padding-right: 21;" v-if="row.name && row.name.length == 2">
                            <span v-for="(trem,tI) in row.name.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.name.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <span style="padding-right: 21;" v-else>{{ row.name }}</span>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" v-if="row.jcsf !== '组长'">
                            <a-form-item >
                                <a-button  class="blue-btn" type="primary" @click="allocationClick(row)">分配</a-button>
                            </a-form-item>
                        </a-form>
                        <div v-else style="color: #ed5565;">组长需要对整个审评过程及报告负责，以上仅为组长重点核实的工作内容</div>
                    </template>
                </commpVxeTable>
                
            </div>
            <assignChapters ref="assignChaptersRef" @operationSuccess="operationSuccess" />
        </a-modal>
    </div>
</template>
<script>
import {
    spcygetXcjcFprwZjList,
    spcygetXcjcRwfpPersonList,
    spcymodifyXcjcZjInFzr,
    spcysubmitXcjcRyfp,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import assignChapters from './assignChapters.vue'
export default {
    components:{
        commpVxeTable,
        assignChapters,
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableConfig: {
              api: assessCheckApi.spcygetXcjcRwfpPersonList,
              rowId: 'userid',
              height:window.innerHeight - 310,
              autoHidden:true,
              pageSize:100000,
              paramet:{}
          },
          formItem: [],
          dataTableKey:null,
          columnsVxe: [{
                title: '审评员身份',
                field: 'jcsf',
                width:100,
            },{
                title: '姓名',
                field: 'name',
                titleInterval:true,
                slots: {
                    header:'data1_header',
                    default: 'operation_realname',
                },
                width: 97,
            },{
                title: '审评章节',
                field: 'zjContent',
            },{
                title: '操作',
                field: 'userid',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                },
                fixed: 'right',
                width:75,
            }],
            activeKey:0,
            ztData:{},
            reportList:[],
            masterData:{},
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val,list,fhbsxzt,index){
            this.spinning = true
            this.masterData = val
            if(list && list.length && fhbsxzt == 1){
                this.ztData = val
                this.reportList = list
                this.currentData = {...list[index?index:0],fhbsxzt:fhbsxzt}
                spcygetXcjcFprwZjList({sqsxid:this.currentData.sqsxid}).then(res=>{//查询章节
                    if(res.code == 200){
                        this.chapterList = res.result.records.map(i=>{
                            return {...i,ftxfzrid:i.ftxfzrid?i.ftxfzrid:undefined}
                        })
                        //console.log('章节查询',this.chapterList)
                    }else{
                        this.chapterList = []
                    }
                    this.spinning = false
                })
                spcygetXcjcRwfpPersonList({sqsxid:this.currentData.sqsxid}).then(res=>{//查询负责人
                    if(res.code == 200){
                        this.headList = res.result.records
                        //console.log('查询负责人',res)
                    }else{
                        this.headList = []
                    }
                })
                this.dataTableConfig.paramet = {
                    sqsxid:this.currentData.sqsxid
                }
                this.dataTableKey = Date.now()
            }else{
                this.currentData = val
                spcygetXcjcFprwZjList({sqsxid:val.sqsxid}).then(res=>{//查询章节
                    if(res.code == 200){
                        this.chapterList = res.result.records.map(i=>{
                            return {...i,ftxfzrid:i.ftxfzrid?i.ftxfzrid:undefined}
                        })
                        //console.log('章节查询',this.chapterList)
                    }else{
                        this.chapterList = []
                    }
                    this.spinning = false
                })
                spcygetXcjcRwfpPersonList({sqsxid:val.sqsxid}).then(res=>{//查询负责人
                    if(res.code == 200){
                        this.headList = res.result.records
                        //console.log('查询负责人',res)
                    }else{
                        this.headList = []
                    }
                })
                this.dataTableConfig.paramet = {
                    sqsxid:val.sqsxid
                }
                this.dataTableKey = Date.now()
            }
            //console.log(this.currentData)
        },
        tabPaneChange(val){
            // this.currentData = this.reportList[val]
            this.getData(this.ztData,this.reportList,this.currentData.fhbsxzt,val)
        },
        operationSuccess(){
            this.dataTableKey = Date.now()
        },
        //分配
        allocationClick(row){
            //console.log(row)
            this.$refs.assignChaptersRef.getData({sqsxid:this.currentData.sqsxid,...row})
            this.$refs.assignChaptersRef.visible = true
        },
        headChange(val,item){
            //console.log(val)
            spcymodifyXcjcZjInFzr({fxcjczjid:item.id,userid:val,sqsxid:this.currentData.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData(this.currentData)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){
            spcysubmitXcjcRyfp({sqsxid:this.currentData.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.visible = false
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },

    }
}
</script>
<style lang="less">
.chapter-head-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    .chapter-head-for-v{
        width: 40%;
        display: flex;
        justify-content: center;
        padding: 5px 10px;
        border-bottom: 1px solid #d9d9d9;
        .fzjmc-text{
            flex: 1;
        }
    }
}
.assignPersonnel-modal-box{
    .ant-modal-body{
        padding: 8px;
    }
    .assignPersonnel-fcyjcfw-box{
        display: flex;
        align-items: flex-start;
        margin:0 5px 10px 5px;
        .left-text-v{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 98px !important;
            text-align: right;
            font-size: 16px;
            font-family:simHei !important;
            padding: 3px 3px 4px 3px;
        }
    }
}

</style>